<template>
	<FormDlg title="对讲" @hide="onHide" @show="onShow" ref="dlg" :disabled="errors.any()">
		<div class="row" v-loading="loading">
			<div class="col-lg-12 col-xs-12 col-md-12">
				<div class="col-lg-4 col-xs-4 col-md-4">
					<div class="row"></div>
				</div>
				<div class="col-lg-4 col-xs-4 col-md-4" align="center">
					<div class="row">
						<i class="fa fa-microphone-slash fa-6 mksize" aria-hidden="true" v-show="!isdj"></i>
						<i class="fa fa-microphone fa-6 mksize" aria-hidden="true" v-show="isdj"></i>
					</div>
					<div class="row selecttype">
						<div>广播方式：</div>
						<el-select size="mini" v-model="broadcastType" placeholder="请选择广播方式">
							<el-option v-for="item in [{id:0,name:'TCP广播，不带包长'},{id:1,name:'TCP广播，带2字节包长'},{id:2,name:'UDP广播'}]"
								:key="item.id"
								:label="item.name"
								:value="item.id">
							</el-option>
						</el-select>
					</div>
					<div class="row">
						<button type="button" class="btn btn-xs btn-success" @click="startDj" v-show="!isdj">开启对讲</button>
						<button type="button" class="btn btn-xs btn-success" @click="shuntDownDj" v-show="isdj">关闭对讲</button>
					</div>
				</div>
				<div class="col-lg-5 col-xs-5 col-md-4">
					<div class="row"></div>
				</div>
			</div>
			<div id="car-eye-playervoice" style="display: none;">
				<div class='row' id='player10089'></div>
			</div>
		</div>
	</FormDlg>
</template>

<script>
import $ from 'jquery'
import FormDlg from 'components/FormDlg.vue'
import {Recorder} from '../assets/config/voiceconfig.js'
export default {
	data() {
		return {
			isdj: false,
			deviceId: '',
			channel: '',
			device: '',
			record: null,//多媒体对象，用来处理音频
			socket: null,
			speekData: {},
			broadcastType: 0,
			player: null,
			loading: false
		}
	},
	components: {
		FormDlg
	},
	mounted() {
		$("#voiceintercom").find("div.modal-footer").remove();
		this.initPlayVoice();
	},
	methods: {
		onHide() {
			this.$emit("hide");
		},
		onShow() {
			this.$emit("show");
		},
		async show(data) {
			this.channel = data.channel;
			this.deviceId = data.deviceId;
			this.device= data.device;
			this.isdj = false;
			this.$nextTick(() => {
				this.$refs['dlg'].show();
			})
		},
		initPlayVoice() {
			var container = document.getElementById("player10089");
			/*global JessibucaPro*/
			/*eslint no-undef: "error"*/
			var jessibuca = new JessibucaPro({
				container: container,
				decoder: "/jessibuca/decoder-pro.js",
				videoBuffer: 0.2, // 缓存时长
				hasVideo: false,//是否有视频，如果设置`false`，则不对视频数据解码，只播放音频数据。
				forceNoOffscreen: false,
				isNotMute: true
			});
			jessibuca.on("error", function (error) {
				console.log('error:', error)
			});
			this.player = jessibuca;
		},
		shuntDownDj() {//关闭对讲
			var self = this;
			self.loading = true;
			self.isdj = false;
			if (self.socket) {
				self.socket.close();
				self.socket = null;
				self.record.clear();
				self.record.stop();
				self.player.destroy();
				setTimeout(() => {
					self.initPlayVoice();
					self.loading = false;
				}, 1000);
				$.get(self.$store.state.baseUrl + "/playControl", {
					device: self.device,
					channel: self.channel,
					command: 0
				}).then(ret => {});
				console.log('关闭对讲以及WebSocket');
			}
		},
		startDj() {//开启对讲
			let that = this;
			navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
			if (!navigator.getUserMedia) {
					alert('浏览器不支持音频输入');
			} else {
				navigator.getUserMedia({audio: true},
					function (mediaStream) {
						that.loading = true;
						that.init(new Recorder(mediaStream));
						console.log('开始对讲');
						that.startPlayVoice();
						that.useWebSocket();
					},
					function (error) {
						console.log(error);
						switch (error.message || error.name) {
							case 'PERMISSION_DENIED':
							case 'PermissionDeniedError':
								console.info('用户拒绝提供信息。');
								break;
							case 'NOT_SUPPORTED_ERROR':
							case 'NotSupportedError':
								console.info('浏览器不支持硬件设备。');
								break;
							case 'MANDATORY_UNSATISFIED_ERROR':
							case 'MandatoryUnsatisfiedError':
								console.info('无法发现指定的硬件设备。');
								break;
							default:
								console.info('无法打开麦克风。异常信息:' + (error.code || error.name));
								break;
						}
					}
				)
			}
		},
		async useWebSocket() {
			let self =this;
			$.get(self.$store.state.baseUrl + "/startSpeak/"+self.device).then(ret => {
				var self = this;
				if (typeof (WebSocket) == "undefined") {
					console.log("您的浏览器不支持WebSocket");
				} else {
					if(!ret.data)return;
					self.speekData =  ret.data;
					//实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
					var socketUrl = ret.data.push.WebSocket;
					if(location.protocol=="https:"){
						socketUrl = ret.data.push.WebSockets;
					}
					console.log("您的浏览器支持WebSocket",socketUrl);
					if (self.socket != null) {
						self.socket.close();
						self.socket = null;
					}
					self.socket = new WebSocket(socketUrl);
					self.socket.binaryType = 'arraybuffer'
					//打开事件
					self.socket.onopen = function () {
						console.log("websocket已打开");
						self.isdj = true;
						if (self.socket.readyState == 1) { //ws进入连接状态，则每隔500毫秒发送一包数据
							self.record.start(self.socket);
							self.startBroadcast();
						}
					};
					//获得消息事件
					self.socket.onmessage = function (msg) {
						var serverMsg = "收到服务端信息：" + msg.data;
						console.log(serverMsg);
					};
					//关闭事件
					self.socket.onclose = function () {
						self.isdj = false;
						self.record.clear();
						self.record.stop();
						console.log("websocket已关闭");
					};
					//发生了错误事件
					self.socket.onerror = function () {
						self.isdj = false;
						self.record.clear();
						self.record.stop();
						console.log("websocket发生了错误");
					}
				}
			});
		},
		async init(rec) {
			this.record = rec;
		},
		startBroadcast() {//广播
			var self = this;
			$.ajax({
				url: self.$store.state.baseUrl + "/broadcast", // 请求路径
				data: {
					device: self.device,
					channel: self.channel,
					source: self.speekData.stream,
					mode: self.broadcastType//0：TCP广播，不带包长；1：TCP广播，带2字节包长；2：UDP广播;
				}, // 参数
				method: 'post', // 请求类型
				// contentType: 'application/json;charset=utf-8',
				success: function (data) {
					console.log(data.data)
				}
			});
		},
		startPlayVoice() {
			var self = this;
			$.ajax({
				url: self.$store.state.baseUrl + "/play", // 请求路径
				data: {
					device: self.device,
					channel: self.channel,
					vedioType: 0,//0音视频
					record: 0
				}, // 参数
				type: "get", // 请求类型
				async: false,
				contentType: 'application/json;charset=utf-8',
				success: function (res) {
					if(res.data.online==1){
						var url = res.data.WebSocket;
						if(location.protocol=="https:"){
							url = res.data.WebSockets;
						}
						self.player.play(url);
						self.loading = false;
					}
				}
			});
		}
	}
}
</script>
<style>
.djicon {
	width: 30%;
	height: 100%;
}
.mksize {
	font-size: 9vh;
}
.selecttype{
	display: flex;
	align-items: center;
	width: 270px;
	margin: 20px 0;
}
</style>